<template>
    <div  class="app-container">
        <div class="header"> 新增用户 </div>
        <div class="form-container">
          <div v-if='show' class="form">
            <el-form :model="adminForm" status-icon :rules="rules" ref="adminForm" label-width="100px">
                <el-form-item label="名称" prop="username" >
                    <el-col :span="18">
                          <el-input v-model="adminForm.username" placeholder="请输入姓名"/>
                    </el-col>
                </el-form-item>

                <el-form-item label="密码" prop="password" >
                     <el-col :span="18">
                        <el-input v-model="adminForm.password" show-password placeholder="请输入密码"/>
                     </el-col>
                </el-form-item>

                <el-form-item label="性别" prop="sex" >
                  <el-select v-model="adminForm.sex" clearable placeholder="请选择性别">
                    <el-option v-for="item in sexs" :key="item.id" :label="item.name" :value="item.id"/>
                  </el-select>
                </el-form-item>

                <el-form-item label="手机号码" prop="phoneNum" >
                    <el-col :span="18">
                         <el-input v-model="adminForm.phoneNum" placeholder="请输入手机号码"/>
                     </el-col>
                </el-form-item>
                
                <el-form-item label="邮箱" prop="email" >
                    <el-col :span="18">
                        <el-input v-model="adminForm.email" placeholder="请输入邮箱"/>
                     </el-col>
                </el-form-item>

                <el-form-item label="生日" prop="birth" >
                    <el-date-picker v-model="adminForm.birth" value-format="timestamp" type="datetime" placeholder="请选择生日"/>
                </el-form-item>
                <!-- <el-form-item label="个人简介" prop="introduction" >
                    <el-input v-model="adminForm.introduction" placeholder="请输入个人简介"/>
                </el-form-item> -->

                <el-form-item label="地址" prop="address" >
                     <el-col :span="18">
                        <el-input v-model="adminForm.address" placeholder="请输入地址 随便的没限制"/>
                     </el-col>
                </el-form-item>

                <el-form-item label="状态" prop="isEnable" >
                  <el-select v-model="adminForm.isEnable" clearable placeholder="请选择状态">
                    <el-option v-for="item in status" :key="item.id" :label="item.name" :value="item.id"/>
                  </el-select>
                </el-form-item>
                  
                <el-form-item label="角色类型" prop="role.id">
                  <el-select v-model="adminForm.role.id" clearable placeholder="请选择角色类型">
                    <el-option v-for="item in roles" :key="item.id" :label="item.name" :value="item.id"/>
                  </el-select>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submitForm('adminForm')">立即创建</el-button>
                    <el-button @click="resetForm('adminForm')">重置</el-button>
                </el-form-item>
            </el-form>
          </div>
          <div v-else class="tip">
              sorry ! 您没有足够的权限哦!
          </div>
        </div>
</div>
</template>

<script>
import sexs from "@/data/sexs"
import status from "@/data/status"
import rules  from "@/data/adminRules"
import { mapGetters } from "vuex";
  export default {
    data() {
      return {
        roles: [],
        sexs,
        status,
        adminForm: {
          username: '123',
          password:'12580',
          sex:0,
          phoneNum:'13711208663',
          email:'2225602504@qq.com',
          birth: 1624508307000,
          introduction:'',
          address:'广州航海学院',
          isEnable:1,
          role:{
            id:1
          }
        },
        rules,
        show:false
      };
    },
   computed: {
    ...mapGetters([ "token"]),
  },
    methods: {
      async getData() {  
        // 获取角色类型列表
        let  res = await this.$store.dispatch('dataBase/getRoleList') 
        if(res.code == 1) {
            // console.log(res.data);
            this.roles = res.data
        }else{
            this.$message({ showClose: true,message: res.msg, type: 'error'})
        }
      },
      submitForm(formName) {
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            const res = await this.$store.dispatch('admin/addAdmin',this.adminForm)
            if(res.code == 1) {
              this.$message({ showClose: true, message: res.msg, type: 'success' })
              this.$refs[formName].resetFields();
            }else{
              this.$message({ showClose: true, message: res.msg, type: 'error' })
            }

          } else {
            this.$message({ showClose: true, message: '请输入填写合法的表单数据', type: 'error' })
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.$message({ showClose: true,  message: '重置成功',type: 'success'})
      }
    },
    mounted() {
      this.getData();
          this.show = this.token == `admin`
    }
  }
</script>


<style lang="scss" scoped>
    .app-container{
        position: absolute;
        left: 0;
        right: 0;
        padding: 30px;
        background-size: cover;
        height: 100%;
        background-attachment: fixed;
        background-image: url(https://cdn.jsdelivr.net/npm/kang-static/home/assets/bg/020.jpg);
        background-repeat: no-repeat;
            
        .header{
            text-align: center;
            z-index: -999;
            margin-bottom: 20px;
            font-size: 20px;
            color: #606266;
            font-weight: 700;
        }
        .form-container{
            display: flex;
            justify-content: center;
            align-items:center;
            padding-top: 30px;
            width: 500px;
            margin: 0 auto;
            border-radius: 5px;
            background: hsla(0,0%,100%,.5);
            box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
        }
        .form{
            width: 400px;
        }
        .tip{
          height: 90px;
          font-size: 20px;
          line-height: 65px;
          color: #606266;
          font-weight: 700;
        }
    }
</style>